<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background: url('../img/bg3.jpg') no-repeat 0 0/cover;
        }

        .container {
            background: linear-gradient(rgba(231, 171, 231, 0.8), rgba(111, 2, 111, 0.9));
            border-radius: 10px;
            width: 600px;
            height: 500px;
            /* margin-top: 200px; */
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            color: aqua;
        }

        .title-p {
            width: 100%;
            text-align: center;
            font-size: 20px;
            font-weight: 550;
        }

        .register-box {
            margin-top: 50px;
        }

        .tips {
            margin-left: 10px;
            color: red;
        }

        .form-group {
            margin-bottom: 15px;
            margin-left: 5%;
        }

        .control-label {
            display: inline-block;
            max-width: 100%;
            margin-bottom: 5px;
            font-weight: 700;
        }

        .form-control {
            display: block;
            width: 90%;
            height: 34px;
            /* padding: 6px 12px; */
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .register-box {
            margin-bottom: 38px;
        }

        .modal-footer {
            width: 100%;
            /* margin-top: 20px; */
        }

        .modal-footer>.gologin {
            float: right;
        }

        .modal-footer a {
            color: rgb(47, 255, 47);
            font-weight: bold;
        }

        .btn {
            color: orangered;
            background-color: aqua;
            border: none;
            /* border-color: rgb(9, 117, 117); */
            margin-right: 30px;
            height: 40px;
            float: left;
            margin-left: 200px;
            width: 200px;
            border-radius: 6px;
            font-size: 20px;
            cursor: pointer;
        }

        .btn:hover {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin-left: 280px;
            margin-top: -30px;
            transition: all 0.3s;
            background-color: orangered;
            color: aqua;
            font-weight: bold;
            /* opacity: 0.5; */
            /* border-color: rgb(152, 50, 13); */
        }

        a {
            /* text-decoration: none; */
            margin-right: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <form class="register-box">
            <p class="title-p">用户注册</p>
            <div class="form-group">
                <label for="recipient-name" class="control-label">用户名:</label>
                <input type="text" class="form-control" id="username">
            </div>
            <div class="form-group">
                <label for="recipient-name" class="control-label">密码:</label>
                <input type="password" class="form-control" id="password">
            </div>
            <div class="form-group">
                <label for="recipient-name" class="control-label">重复密码:</label>
                <input type="password" class="form-control" id="rpassword">
            </div>
            <div class="form-group">
                <label for="recipient-name" class="control-label">手机号码:</label>
                <input type="text" class="form-control" id="phone">
            </div>
            <div class="form-group">
                <label for="recipient-name" class="control-label">昵称:</label>
                <input type="text" class="form-control" id="nickname">
            </div>
        </form>
        <div class="modal-footer">
            <span class="gologin"><a href="login.html">已有账号去登录</a></span>
            <button type="button" class="btn btn-primary">注册</button>
        </div>
    </div>


    <script src="../js/tool.js"></script>
    <script>
        // 1.获取元素  
        let username = document.querySelector('#username')
        let password = document.querySelector('#password')
        let rpassword = document.querySelector('#rpassword')
        let nickname = document.querySelector('#nickname')
        let phone = document.querySelector('#phone')
        let btn = document.querySelector('.btn')

        // 正则格式验证 
        var rules = [
            {
                name: username,
                rule: /^.{5,}$/i,
                message: '用户名格式错误'
            },
            {
                name: password,
                rule: /^.{6,}$/,
                message: '密码错误'
            },
            {
                name: rpassword,
                rule: /^.{6,}$/,
                message: '重复密码错误'
            },

            {
                name: nickname,
                rule: /^.{1,}$/,
                message: '昵称有误'
            }
        ]

        init();

        function init() {
            handleTest();
            handleClick();
        }

        function handleTest() {
            rules.forEach(function (it, index) {
                it.name.onblur = function () {
                    check(it.name, it.rule, it.message)
                }
            })
        }

        // 封装验证的方法 
        function check(ele, reg, message) {
            // 在每一次验证之前都清除提示 
            ele.nextElementSibling ? ele.nextElementSibling.remove() : ''


            // 正则验证    
            var res = reg.test(ele.value)
            if (!res) {
                // 表示验证不通过 
                var p = document.createElement('p')
                p.innerHTML = message
                p.className = 'tips'
                ele.parentNode.appendChild(p)
                return false
            }

            //验证重复密码是否等于输入密码
            if (rules[2].name.value) {
                if (rules[1].name.value != rules[2].name.value) {
                    var p = document.createElement('p')
                    p.innerHTML = '密码与输入密码不符！'
                    p.className = 'tips'
                    rules[2].name.parentNode.appendChild(p)
                    return false
                }
            }

            return true
        }


        // 2. 绑定注册按钮事件 
        function handleClick() {
            btn.onclick = () => {

                //整理参数，查看接口文档！
                let params = {
                    url: '/users/register',
                    query: {
                        username: username.value,
                        password: password.value,
                        rpassword: rpassword.value,
                        nickname: nickname.value,
                        phone: phone.value
                    }
                }

                //ajax 向后端请求
                /* 
                 发送数据给后端  
                   + 后端拿到数据后 校验数据格式  然后拿到唯一标识用户名 去数据库查找 有没有相同的用户名  
                   + 有相同用户名 那么就直接返回 该账号已经被注册了 如果没有相同  直接保存所有信息到数据库 用户表 
                   + 返回注册成功 
                */
                axios.post(params).then(res => {
                    console.log(res);
                    //请求成功的状态码是--- 1
                    if (res.code == 1) {
                        alert('注册成功！');
                        //跳转到登录页
                        location.href = './login.html';
                    }
                })
            }
        }

    </script>




</body>

</html>